<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
v-if

根据表达值的真假,切换元素的显示和隐藏

1. v-if指令的作用是:根据表达式的真假切换元素的显示状态

2. 本质是通过操纵dom元素来切换显示状态

3. 表达式的值为true,元素存在于dom树中,为false,从dom树中移除

4. 频繁的切换v-show,反之使用v-if,前者的切换消耗小

-->
<div id="app">
    <button @click="changeIsShow">切换</button>
    <p v-if="isShow">程序猿</p>
    <p v-show="isShow">黑马程序员 - v-show修饰</p>
    <h2 v-if="age>18">我成年了</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeIsShow:function() {
               this.isShow = !this.isShow;
            },
        }
    });
</script>
</html>